DataViz 2024 Workshop Day 2

Acknowledgement

• The content is inspired by the following books and workshop materials:
  • Level Up Shiny https://posit-conf-2024.github.io/level-up-shiny/workshop.html
  • Introduction to Shiny for R https://github.com/posit-conf-2024/shiny-r-intro
  • Mastering Shiny https://mastering-shiny.org/

bslib

As we mentioned earlier, the bslib package provides a modern UI toolkit for Shiny, R Markdown, and Quarto based on Bootstrap. It provides,

• Custom theming of Shiny apps and R Markdown documents

• Switch between different versions of Bootstrap

• Modern UI components like cards, value boxes, sidebars, and more.

We will now take a look at the first two of these features.

Bootswatch

Due to the ubiquity of Bootstrap a large amount of community effort has gone into developing custom themes - a large free collection of these are available at bootswatch.com/.

bs_theme()

Provides a high level interface to adjusting the theme for an entire Shiny app,

• Change bootstrap version via version argument

• Pick a bootswatch theme via bootswatch argument

• Adjust basic color palette (bg, fg, primary, secondary, etc.)

• Adjust fonts (base_font, code_font, heading_font, font_scale)

• and more

The object returned by bs_theme() can be passed to the theme argument of fluidPage() and similar page UI functions.

Demo 08 - Dynamic theming

library(tidyverse)
library(shiny)
library(bslib)

d = readr::read_csv(here::here("data/weather.csv"))

d_vars = c("Average temp" = "temp_avg",
           "Min temp" = "temp_min",
           "Max temp" = "temp_max",
           "Total precip" = "precip",
           "Snow depth" = "snow",
           "Wind direction" = "wind_direction",
           "Wind speed" = "wind_speed",
           "Air pressure" = "air_press")

ui = page_sidebar(
  theme = bs_theme(),
  title = "Weather Data",
  sidebar = sidebar(
    selectInput(
      "region", "Select a region", 
      choices = c("West", "Midwest", "Northeast", "South")
    ),
    selectInput(
      "name", "Select an airport", choices = c()
    ),
    selectInput(
      "var", "Select a variable",
      choices = d_vars, selected = "temp_avg"
    )
  ),
  card(
    card_header(
      textOutput("title"),
    ),
    card_body(
      plotOutput("plot")
    )
  ),
  uiOutput("valueboxes")
)

server = function(input, output, session) {
  bslib::bs_themer()
  
  observe({
    updateSelectInput(
      session, "name",
      choices = d |>
        distinct(region, name) |>
        filter(region == input$region) |>
        pull(name)
    )
  })
  
  output$valueboxes = renderUI({
    clean = function(x) {
      round(x,1) |> paste("°C")
    }
    
    layout_columns(
      value_box(
        title = "Average Temp",
        value = mean(d_city()$temp_avg, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-half"),
        theme = "success"
      ),
      value_box(
        title = "Minimum Temp",
        value = min(d_city()$temp_min, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-snow"),
        theme = "primary"
      ),
      value_box(
        title = "Maximum Temp",
        value = max(d_city()$temp_max, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-sun"),
        theme = "danger"
      )
    )
  })
  
  output$title = renderText({
    names(d_vars)[d_vars==input$var]
  })
  
  d_city = reactive({
    req(input$name)
    d |>
      filter(name %in% input$name)
  })
  
  output$plot = renderPlot({
    d_city() |>
      ggplot(aes(x=date, y=.data[[input$var]])) +
      geom_line() +
      theme_minimal()
  })
}

shinyApp(ui = ui, server = server)

thematic

thematic is an R package that:

Simplified theming of ggplot2, lattice, and {base} R graphics. In addition to providing a centralized approach to styling R graphics, thematic also enables automatic styling of R plots in Shiny, R Markdown, and RStudio.

In the case of our Shiny app, to get dynamic theming of our plot as well as our UI all we need to do is to include a call to thematic_shiny() before the app is loaded.

Demo 09 - Full dynamic theming

library(tidyverse)
library(shiny)
library(bslib)

d = readr::read_csv(here::here("data/weather.csv"))

d_vars = c("Average temp" = "temp_avg",
           "Min temp" = "temp_min",
           "Max temp" = "temp_max",
           "Total precip" = "precip",
           "Snow depth" = "snow",
           "Wind direction" = "wind_direction",
           "Wind speed" = "wind_speed",
           "Air pressure" = "air_press")

ui = page_sidebar(
  theme = bs_theme(bootswatch = "darkly"),
  title = "Weather Data",
  sidebar = sidebar(
    selectInput(
      "region", "Select a region", 
      choices = c("West", "Midwest", "Northeast", "South")
    ),
    selectInput(
      "name", "Select an airport", choices = c()
    ),
    selectInput(
      "var", "Select a variable",
      choices = d_vars, selected = "temp_avg"
    )
  ),
  card(
    card_header(
      textOutput("title")
    ),
    card_body(
      plotOutput("plot")
    )
  ),
  uiOutput("valueboxes")
)

server = function(input, output, session) {
  observe({
    updateSelectInput(
      session, "name",
      choices = d |>
        distinct(region, name) |>
        filter(region == input$region) |>
        pull(name)
    )
  })
  
  output$valueboxes = renderUI({
    clean = function(x) {
      round(x,1) |> paste("°C")
    }
    
    layout_columns(
      value_box(
        title = "Average Temp",
        value = mean(d_city()$temp_avg, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-half"),
        theme = "success"
      ),
      value_box(
        title = "Minimum Temp",
        value = min(d_city()$temp_min, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-snow"),
        theme = "primary"
      ),
      value_box(
        title = "Maximum Temp",
        value = max(d_city()$temp_max, na.rm=TRUE) |> clean(),
        showcase = bsicons::bs_icon("thermometer-sun"),
        theme = "danger"
      )
    )
  })
  
  output$title = renderText({
    names(d_vars)[d_vars==input$var]
  })
  
  d_city = reactive({
    req(input$name)
    d |>
      filter(name %in% input$name)
  })
  
  output$plot = renderPlot({
    d_city() |>
      ggplot(aes(x=date, y=.data[[input$var]])) +
      geom_line()
  })
}

thematic::thematic_shiny()

shinyApp(ui = ui, server = server)

Your turn - Exercise 06

Using code provided in exercises/ex06.R (which is the same as demo09) experiment with bslib’s themer tool to explore different themes .

• Try changing the main theme as well as the foreground and background colors

• Try changing one or more of the accent colors

• Try the fonts being used (e.g. Prompt, roboto, Oswald, Fira Sans) and changing the base font size

• Based on the output in your console, update the bs_theme() call in the script to reflect the changes you made

Your turn - Exercise 07 - Part 1

Go to shinyapps.io and sign up for an account if you don’t have one already.

• You can create a new account via email & a password

• or via authorisation through Google or GitHub.

If asked to pick a plan, use the Free option (more than sufficient for our needs here)

Once you have an account, you will need to install the rsconnect package and authenticate your account (just follow and complete step 1 and 2).

Organising your app

For deployment generally apps will be organised as a single folder that contains all the necessary components (R script, data files, other static content).

• Pay attention to the nature of any paths used in your code

  • Absolute paths are almost certainly going to break

  • Relative paths should be to the root of the app folder

• Static files (e.g. css, js, etc.) generally are placed in the www/ subfolder

• Your script does not need to be named app.R or ui.R/server.R

• Check / think about package dependencies

Demo 10 - shinylive

One of the really exciting developments in the last couple of years is the ability to run R (and Python) inside a web browser using webasm. shinylive is a package that lets you bundle your shiny app as a static website that can be hosted anywhere you can host static html.

shinylive::export("demos/demo10","demos/demo10/site")

httpuv::runStaticServer("demos/demo10/site")

Other publishing options

• For other R users - you can share your script(s) and data directly

  • or better yet, bundle them into an R package

• Run a local instance of shiny server

• Use shinyapps.io (public) or posit.cloud (within team)

• Use Posit Connect

Mastering Shiny

shinyjs

Easily improve the user experience of your Shiny apps in seconds

• Hide (or show) an element

• Disable (or enable) an input

• Reset an input back to its original value

• Delay code execution

• Easily call your own JavaScript functions from R

DT

The R package DT provides an R interface to the JavaScript library DataTables. R data objects (matrices or data frames) can be displayed as tables on HTML pages, and DataTables provides filtering, pagination, sorting, and many other features in the tables.

• Interactive tables

• Tables as inputs

• Editable tables

reactable

Interactive data tables for R, based on the React Table library and made with reactR.

• Sorting, filtering, pagination
• Grouping and aggregation
• Built-in column formatting
• Custom rendering via R or JavaScript
• Expandable rows and nested tables
• Conditional styling

htmlwidgets

The htmlwidgets package provides a framework for easily creating R bindings to JavaScript libraries. Widgets created using the framework can be:

• Used at the R console for data analysis just like conventional R plots (via RStudio Viewer).
• Seamlessly embedded within R Markdown documents and Shiny web applications.
• Saved as standalone web pages for ad-hoc sharing via email, Dropbox, etc.

pool

The goal of the pool package is to abstract away the logic of connection management and the performance cost of fetching a new connection from a remote database. These concerns are especially prominent in interactive contexts, like Shiny apps (which connect to a remote database) or even at the R console.

See articles available at shiny.rstudio.com/articles/#data

Awesome Shiny Extensions

A curated list of awesome R packages that offer extended UI or server components for the R web framework Shiny.

Thanks!